<template>
  <div class="musiccreate">
    <h1>歌单{{ id ? `编辑——${id}` : "创建" }}</h1>
    <br />
    <el-form label-width="120px" @submit.native.prevent="save()">
      <el-form-item label="歌单ID">
        <el-input v-model="model.m_id"></el-input>
      </el-form-item>
      <el-form-item label="歌单名">
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item label="歌单图片">
        <el-input v-model="model.pic_url"></el-input>
      </el-form-item>
      <el-form-item label="歌曲">
        <el-select v-model="model.musics" filterable multiple>
          <el-option
            v-for="item in musics"
            :key="item.m_id"
            :label="item.name"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-button round type="primary" native-type="submit">
            保存
          </el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "MusicsCreate",
  components: {},
  props: {
    id: {},
  },
  data() {
    return {
      musics: [],
      model: {
        isAdmin: true,
      },
    };
  },
  methods: {
    async save() {
      let res;
      if (this.id) {
        res = await this.$http.put(
          `rest/musicList/edit/${this.id}`,
          this.model
        );
      } else {
        res = await this.$http.post("rest/musicList/create", this.model);
      }
      this.$message({
        type: "success",
        message: "保存成功",
      });
      this.$router.push("/musicList/list");
    },
    async fetch() {
      const res = await this.$http.get(`rest/musicList/edit/${this.id}`);
      this.model = res.data;
    },
    async fetchMusic() {
      const res = await this.$http.get("rest/music/list");
      this.musics = res.data;
    },
  },
  created() {
    this.fetchMusic();
    this.id && this.fetch();
  },
};
</script>

<style scoped></style>
